<!-- 购物车页 -->
<template>
  <div class="cart-box">
    <div v-for="item in cartList" :key="item.id" class="cart-item">
      <!-- 每个商品前的按钮 -->
      <van-checkbox
        :name="item"
        @click="onchxClickFn(item)"
        class="checkbox-btn"
        v-model="item.checked"
      ></van-checkbox>

      <!-- 商品信息 -->
      <van-card :price="item.retail_price" :thumb="item.list_pic_url">
        <template #num>
          <van-stepper
            v-model="item.number"
            @change="onChange(item.number, item.id)"
          />
        </template>

        <!-- 自定义标题，删除按钮 -->
        <template #title>
          <span>{{ item.goods_name }}</span>
          <van-icon
            name="delete-o"
            class="delete-icon"
            @click="onDelete(item)"
          />
        </template>
      </van-card>
    </div>
    <!-- 按钮 -->

    <!-- 下方结算 -->
    <!-- vant显示的数字不对，9999元会显示成99.99元，所以需要乘以100 -->
    <van-submit-bar
      :price="checkedGoodsAmount * 100"
      button-text="提交订单"
      @submit="onSubmit"
    >
      <van-checkbox @click="onClickCheckAll" v-model="checkedAll"
        >全选</van-checkbox
      >

      <template #tip>
        你的收货地址不支持同城送,
        <span @click="onClickEditAddress">修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script>
import {
  GetCartData,
  UpdateCartData,
  ToggleCartCheckedData,
  DeleteCartData2,
} from "@/https/http";

export default {
  name: "cart",
  data() {
    return {
      cartList: [], //商品总列表
      cartTotal: {}, //购物车数据
      // price: 0,
      goodsId: "",
      number: "",
      productId: "",
      id_: "",
      isChecked: "1",
      // productIdsList:[],
      productIds: "",
      checkedGoodsAmount: 0, //选中的商品的总金额
      checkedAll: 0,
    };
  },

  methods: {
    // 获取数据
    getData() {
      // 发送请求，获取当前购物车的数据
      GetCartData().then((res) => {
        console.log(11111, res);
        this.cartList = res.data.cartList; //商品总列表
        this.cartTotal = res.data.cartTotal; //购物车数据

        //选中的商品的总金额
        this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount;

        // 如果有选中的商品
        if (this.cartTotal.checkedGoodsCount > 0) {
          // 选中的商品数量===购物车内的所有商品总数量 时候，全选按钮就会被选中
          if (this.cartTotal.checkedGoodsCount == this.cartTotal.goodsCount) {
            this.checkedAll = true;
          } else {
            //不相等的时候，全选按钮就不会被选中
            this.checkedAll = false;
          }
        } else {
          // 如果没有选中的商品，全选按钮就不会被选中
          this.checkedAll = false;
        }
      });
    },

    // 删除单个商品的时候，发送删除商品的请求
    onDelete(item) {
      DeleteCartData2({ productIds: item.product_id.toString() }).then(
        (res) => {
          if (res.errno === 0) {
            this.getData(); //重新请求购物车商品数据，渲染
          }
        }
      );
    },

    //  按下商品+1或者-1按钮， 购物车商品数量变化 ,onChange会接收变化的商品id
    onChange(value, id_) {
      this.cartList.forEach((item) => {
        // 找出对应的goods_id,number
        if (item.id === id_) {
          this.id_ = id_;
          this.goodsId = item.goods_id;
          this.number = item.number;
          this.productId = item.product_id;
        }
      });
      // 发请求
      this.updateCartData();
    },

    // 购物车商品步进器功能接口  按下商品+1或者-1按钮，
    updateCartData() {
      // 直接发送更新数据请求，将当前的商品数量带着
      UpdateCartData({
        goodsId: this.goodsId,
        id: this.id_,
        number: this.number,
        productId: this.productId,
      }).then((res) => {
        console.log(999, res);
        if (res.errno === 0) {
          this.getData(); //重新请求购物车商品数据，渲染
        }
      });
    },

    // 点击商品单选按钮，切换购物车商品选中状态，发送请求
    onchxClickFn(item) {
      this.isChecked = item.checked ? "1" : "0";
      this.productIds = item.product_id.toString();
      this.toggleCartCheckedData();
    },

    // 切换购物车商品选中状态，发送请求
    toggleCartCheckedData() {
      console.log(this.isChecked);
      ToggleCartCheckedData({
        isChecked: this.isChecked,
        productIds: this.productIds,
      }).then((res) => {
        console.log(667, res);
        if (res.errno === 0) {
          this.getData(); //重新请求购物车商品数据，渲染
        }
      });
    },

    // 点击全选，切换购物车商品选中状态，发送请求
    onClickCheckAll() {
      this.isChecked = this.checkedAll ? "1" : "0";
      let productIdAllList = [];

      this.cartList.forEach((item) => {
        productIdAllList.push(item.product_id.toString());
      });
      this.productIds = productIdAllList.join(",");
      this.toggleCartCheckedData();
    },

    // 提交
    onSubmit() {},
    // 编辑地址
    onClickEditAddress() {},
  },
  created() {
    this.getData();
  },
};
</script>
<style scoped lang="less">
/deep/.van-checkbox__label {
  flex: 1;
}
/deep/.van-checkbox {
  margin-bottom: 2px;
}
/deep/.van-submit-bar {
  bottom: 50px;
}
.cart-box {
  padding-bottom: 150px;
  box-sizing: border-box;
  .van-card {
    position: relative;
  }
  .delete-icon {
    position: absolute;
    top: 5px;
    right: 5px;
  }
  .cart-item {
    position: relative;
    padding-left: 40px;
    .checkbox-btn {
      position: absolute;
      left: 20px;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
</style>
